{% extends '../../../layouts/skins/v2/layout.volt' %}
{% block videoPlayerSection %}
<div id="video-player-section" class="watch-page">
    <div class="video-player-container">
        <div ng-controller="detailController" class="video-player-root">
            <div id="player-container" class="container with-background" style="width: 954px; height: 542px; padding: 9px; left: auto; visibility: visible; background-size: 962px 549px; background-position: 0px 0px;">
                <div id="flash-player-container" class="player">
                    <div id="myElement">Loading the player...</div>
                    <script type="text/javascript" src="{{url('vendor/jwplayer/jwplayer.js')}}"></script>
                    <script type="text/javascript">jwplayer.key="Tl/cGRKD5+mHxuBA9abJoeWYGnxLoRlF9Xt8VQHJS2nHMmlibF4GZ6FPp4Zk0206";</script>

                    <script>
                        jwplayer("myElement").setup({
                          "autoStart": true ,
                          width: "100%",
                          height: "520",
                          abouttext: "Konnect+",
                          //flashplayer: "public/vendor/jwplayer/jwplayer.flash.swf",
                          logo: {
                                file: "{{ url('layouts/skins/frontend/v2/images/logo.png') }}",
                                link: '',
                                hide : true
                            },

                          skin: "{{url('vendor/jwplayer/skins/five.xml')}}",
                          //image: "{{url('public/layouts/skins/frontend/defaults/images/img1.jpg')}}",
                          playlist: [{
                            sources: [
                                {% for videolink in detail.videoFileLink %}

                                {
                                    file: "{{videolink.videoFile.getLinkSourceServer()}}",
                                    label: "720p SD"
                                },
                                {% endfor %}
                            ],
                              title: "{{ detail.videoDescription.getName()}}",
                            tracks: [{
                              file: "{{url('vendor/jwplayer/big.srt')}}",
                                label: "English"

                            },{
                                file: "{{url('vendor/jwplayer/small.srt')}}",

                                label: "French"
                            }]
                          }],

                          plugins: {
                              '{{url('vendor/jwplayer/plugins/overlay/overlay.js')}}': {
                                text: 'Text that you want to go within the overlayed banner'
                              }
                            }
                        });
                    </script>
                </div>
            </div>

            <div id="video-description" class="container player-width" style="width: 944px;">
                <div class="row">
                    <div class="pull-left">
                        <div class="poster-actions margin-bottom-30">
                            {% if(detail.imageLink.getFirst()) %}
                                {{ image('/public/files/' ~ detail.imageLink.getFirst().images.getImagePath() , 'width' : '100%','height':'50','id':'videoPoster') }}
                            {% else %}
                                {{ image('/public/files/default.jpg'  , 'width' : '100%','height':'50') }}
                            {% endif %}
                            <a href="#" class="btn btn-primary" href="/#!/movie/watch/1007691/kaththi">Watch Trailer</a>
                        </div>
                    </div>
                    <div class="pull-left margin-left-20">
                        <div class="watch-desc">
                            <div class="">
                                <h1 class="largexl font-mont" id="watch-title">
                                    <span itemprop="name" class="bold title">{{ detail.videoDescription.getName()}}</span>
                                    <!--<span class="sub-title">Kaththi</span>!-->
                                </h1>
                                <div class="margin-top-5">
                                    <span id="videoType">Music Video</span>
                                    <span class="sep-pipe">|</span>
                                    <span id="relYear">{{detail.videoDescription.getYearPublish()}}</span>
                                    <span class="sep-pipe">|</span>
                                    <span id="videoDuration">{{detail.getDuration()}} phút</span>
                                    <span id="viewCount" class="">
                                        <span class="sep-pipe">|</span>
                                        <span class="view-count"></span>
                                        <span>68,299 views</span>
                                    </span>
                                </div>
                                <div class="movie-share margin-top-20">
                                    <a href="#" class="">
                                        <i class="fa fa-info-circle fa-1"></i>
                                        Chi tiết
                                    </a>
                                    <a class="">
                                        <i class="fa fa-comments fa-1"></i>
                                        Bình luận
                                    </a>
                                    <a class="share-btn twitter">
                                        <i class="fa fa-twitter-square fa-1"></i>
                                        Twitter
                                    </a>
                                    <a class="share-btn facebook">
                                        <i class="fa fa-facebook-square fa-1"></i>
                                        Facebook
                                    </a>

                                    <a class="share-btn g+">
                                        <i class="fa fa-google-plus-square fa-1"></i>
                                        Google+
                                    </a>
                                </div>
                                <div class="">
                                    <div class="synopsis">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
    <div ng-controller="movieController">
        {% for i in 1..5 %}
            <div>
                <div class="page-header">
                    <h3>
                        <a href="">
                            Video Mới Nổi Bật
                        </a>
                    </h3>
                </div>
                <div class="row">
                    <div class="carousel slide" id="myCarousel">
                        <div class="carousel-inner">
                            {% for i in 1..4 %}
                                <div class="item active col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img data-src="holder.js/100%x200" alt="100%x200" src="" style="height: 200px; width: 100%; display: block;">
                                        <div class="caption">
                                            <h3>Thumbnail label</h3>
                                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            <!--<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> -->
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block videoComments %}
    <div id="fb-comments" class="video-comments">
        <div class="mask">
            <div class="container">
                <div class="row">
                    <div class="page-header">
                        <h3 class="text-left">Bình luận</h3>
                    </div>
                    <div class="fb-comments" data-href="http://javhd.vn" data-numposts="10" data-colorscheme="light" data-width="100%"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
